<template>
  <section>
    <el-form label-width="40px">
      <el-form-item label="标题">
        <el-input size="mini" v-model="template.title" style="width: 150px"/>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="saveBtn">保存</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'
  import errHandler from '@/assets/errHandler'
  export default {
    name: "editReportTemplate",
    props:['template'],
    data() {
      return {
        reportDataId: null,
        reportData:null,
        report:null,
        selPage:null,
        showConfDialog:false,
        widgetData:{widgets:[]},
      }
    },
    computed: {
      ...mapGetters(['department']),
    },
    created() {
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      saveBtn(){
        console.log('template',this.template)
        if(this.template.id) this.updatemReportTemplate(this.template)
        else this.createrReportTemplate(this.template)
      },
      updatemReportTemplate(){
        this.fetch({name:"updatemReportTemplate",data})
          .then(res=>{
            console.log('更新成功--------',res)
            this.$message({type:'success',message:'更新成功！'})
            this.$router.push('/report-management/edit/'+res.id)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createrReportTemplate(data){
        this.fetch({name:"createrReportTemplate",data})
          .then(res=>{
            console.log('创建成功--------',res)
            this.$message({type:'success',message:'创建成功！'})
            this.$router.push('/report-management/edit/'+res.id)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style lang="scss">
  .page-container{
    box-sizing:border-box;
    margin-top:15px;
    display: flex;
    flex-direction: row;
    overflow: auto;
    .page-toolbar{
      border:1px solid #e4e4e4;
      padding:4px;
      width:268px;
    }
    .page-editor{
      border:1px solid #e4e4e4;
      margin-left:10px;
      width:850px;
      .page-toolbar{
        height:24px;
        line-height:24px;
        width:840px;
        background-color: #eeeeee;
        .page-setting{
          float:right;
          color:#666;
          cursor: pointer;
          &:after{clear:both;}
        }
      }
      .editor-box{
        height:1188px;
      }
    }
  }

  .page-row {
    padding-bottom: 10px;
    border-bottom: 1px solid #e4e4e4;

    .page-item {
      float: left;
      box-sizing: border-box;
      margin: 10px 5px;
      position: relative;
      width: 48px;
      height: 48px;
      border: 1px solid darkgrey;
      cursor: pointer;

      &
      :hover {
        border: 1px solid #8391a5;
        transition: all .2s ease;
        box-shadow: grey 0 0 6px 0;

        .btn-del {
          display: inline;
        }

      }
      &
      .active {
        box-shadow: #4db3ff 0 0 6px 0;
      }

      .page-number {
        color: darkgrey;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all .2s ease;
        font-size: 3em;
      }

      .btn-del {
        display: none;
        position: absolute;
        background-color: #f56c6c;
        border-radius: 10px;
        color: #fff;
        width: 20px;
        height: 20px;
        line-height: 18px;
        text-align: center;
        font-size: 20px;
        overflow: hidden;
        top: -10px;
        right: -10px;
        padding: 0;
        opacity: 0.6;

        &
        :hover {
          opacity: 1;
        }

      }
      &
      .add-item {
        border: 1px dashed darkgrey;

        .fa-icon {
          fill: darkgrey;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transition: all .2s ease;
        }

        &
        :hover {
          border: 1px solid #8391a5;

          .fa-icon {
            fill: #8391a5;
          }

        }
      }
    }
  }
</style>
